<template>
	<view class="content">
		<view class="topTitle" :style="{paddingTop:marginTop+'px'}">
			<u-icon name="arrow-left" size="36rpx" color="#fff" @click="nav"></u-icon>
			<text class="text">我的战绩</text>

		</view>
		<view class="user">
			<image :src="userData.pic" mode=""></image>
			<view class="text" :style="{color:userData.member_zt==2?'#F9CD69':'#ffffff'}">
				<view class="name">
					{{userData.user}}
				</view>
				<view class="type">
					{{userData.member_zt==2?'VIP会员':'普通用户'}}
				</view>
			</view>
		</view>

		<view class="card">
			<view class="tabs">
				<u-tabs :list="list" @click="switchover" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
					:scrollable="fasle" lineColor="#AC7D3D" lineHeight="7" lineWidth="30" :current="current" @change="change"></u-tabs>
			</view>

			<view class="honor_" v-if="current==0">
				<view class="image" v-for="(item ,index) in medalList" :style="{filter:item.count?'grayscale(0%)':'grayscale(100%)'}">
					<image src="../../../static/honor.png" mode=""></image>
					<view class="text">
						{{item.title}}
					</view>
				</view>
			</view>

        <view class="grade" v-for="(item , index) in cupList" v-else-if="current==1">
        	<view class="time">
        	 <text style="margin-right: 20upx;">{{item.time}}</text>{{item.game_title}}
        	</view>
           	<view class="num" style="color: #FFCB71;">
							<view class="">
								恭喜您在此次活动中获得第{{item.rank}}名！
							</view>
				
				
				<image src="https://wjlm.goldsu.cn/file/ee3f0e40-45e2-4d37-be8d-27d39c378d60.png" mode=""></image>
        	</view>
					
					
        </view>
        


			<view class="grade" v-for="(item , index) in gradesList" v-else-if="current==2">
				<view class="time">
				 <text style="margin-right: 20upx;">{{item.time}}</text>{{item.title}}
				</view>
				<view class="num" v-for="(items ,index) in item.activ_list">
					<image src="../../../static/challenge.png" mode=""></image>
					<view class="title">
						{{items.title}}
					</view>
					<view class="number">
						<text>成绩：</text> <text>{{items.number}}</text> 
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				marginTop: 0,
				current:0,
				list: [{
					name: '勋章'
				}, {
					name: '奖杯'
				}, {
					name: '成绩'
				}],
				userData: {},
				activeStyle: {
					fontSize: '36upx',
					fontWeight: 700,
					color: '#AC7D3D'
				},
				inactiveStyle: {
					fontSize: '32upx',
					fontWeight: 700,
					color: '#333'
				},
				medalList: [],
				cupList:[],
				gradesList: []
			}
		},
		created() {
			this.userData = uni.getStorageSync("userData")
			this.marginTop = uni.getMenuButtonBoundingClientRect().top
			this.upData()
		},
		methods: {
			upData() {
				this.$myRuquest('home/user/record').then(res => {
					this.medalList = res.data.badges
					this.cupList=res.data.cup_list
					this.gradesList = res.data.grades_list
				})

			},
			change(e){
				console.log(e)
				this.current=e.index
			},
			switchover(e) {
				console.log(e)
			},
			nav() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #171717;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.topTitle {
			color: #fff;
			text-align: center;
			font-size: 36upx;
			position: relative;
			display: flex;
			padding: 10upx 20upx;

			.text {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.user {
			margin: 0 0 50upx 0;
			display: flex;
			padding: 30upx 60upx;

			image {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				margin-right: 20upx;
			}

			.text {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				color: #FFFFFF;

				.name {
					font-size: 36upx;
					font-weight: 700;
				}

				.type {
					font-size: 24upx;
				}
			}
		}

		.card {
			flex: 1;
			padding: 30upx 40upx;
			border-top-left-radius: 30upx;
			border-top-right-radius: 30upx;
			background-color: #F5F5F5;

			.tabs {
				padding: 0 20upx;
			}

			.honor_ {
				background-color: #FFFFFF;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				border-radius: 20upx;
				margin-top: 10upx;

				.image {
					width: 180upx;
					height: 180upx;
					position: relative;
					margin: 28upx 0;

					image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

					.text {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						font-size: 16upx;
						color: #D4B683;
					}
				}

				.image:nth-child(3n-1) {
					margin: 28upx 50upx;
				}
			}

			.grade {
				background: #fff;
				padding: 30upx ;
				border-radius: 12upx;
				
				font-size: 28upx;
				margin: 20upx 0;

				.time {
					font-weight: 700;
					font-size: 30upx;
					
				}

				.num {
					display: flex;
					margin: 25upx 0;
					color: #333333;
					align-items: center;
					image{
						width: 50upx;
						height: 50upx;
						margin-left: 12upx;
					}
					.title {
						flex: 1;
						   white-space: nowrap;
						
						    text-overflow: ellipsis;
						
						    overflow: hidden;
					}
					.number{
						margin-left: 20upx;
						width: 140upx;
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}

	}
</style>
